﻿<link href="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.css" rel="stylesheet" />
<script src="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.findRow.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.getDom.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.getRowData.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.moveRow.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.operateRow.js"></script>

<div class="easyui-panel" data-options="fit:true,border:false,title:'数据行操作演示'">
    <div id="toolbar1" style="padding:10px;">
        <a id="a1" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">隐藏主键为“7”的行</a>
        <a id="a2" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">隐藏地区为“南京”的行</a>
        <a id="a3" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">隐藏索引大于11的第一个行</a>
        <br /><br />
        <a id="a4" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">显示主键为“7”的行</a>
        <a id="a5" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">显示地区为“南京”的行</a>
        <a id="a6" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">显示索引大于11的第一个行</a>
        <br /><br />
        <a id="a7" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">隐藏索引大于14的行</a>
        <a id="a8" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">显示索引大于14的行</a>
        <br /><br />
        <a id="a9" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">查看隐藏的行</a>
        <a id="a10" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">查看未隐藏的行</a>
        <br /><br />
        <span style="color:red;font-weight:bolder;">已开启数据行拖动功能，你可以试试！</span>
    </div>
    <table id="dg1"></table>
</div>

<script>
    $(function () {
        $("#a1").click(function () {
            $("#dg1").datagrid("hideRow", "7");
        });

        $("#a2").click(function () {
            $("#dg1").datagrid("hideRow", function (row, index, rows) { return row.AreaName == "南京"; });
        });

        $("#a3").click(function () {
            $("#dg1").datagrid("hideRow", function (row, index, rows) { return index > 11; }); $(this).linkbutton("disable");
        });


        $("#a4").click(function () {
            $("#dg1").datagrid("showRow", "7");
        });

        $("#a5").click(function () {
            $("#dg1").datagrid("showRow", function (row, index, rows) { return row.AreaName == "南京"; });
        });

        $("#a6").click(function () {
            $("#dg1").datagrid("showRow", function (row, index, rows) { return index > 11; }); $(this).linkbutton("disable");
        });


        $("#a7").click(function () {
            $("#dg1").datagrid("hideRows", function (row, index, rows) { return index > 14; });
        });

        $("#a8").click(function () {
            $("#dg1").datagrid("showRows", function (row, index, rows) { return index > 14; });
        });


        $("#a9").click(function () {
            var rows = $("#dg1").datagrid("getHiddenRows"), temp = $.array.map(rows, function (val) { return val.AreaName; });
            alert("共有[" + rows.length + "]条隐藏的行，其地区集合为：" + temp.join(","));
        });

        $("#a10").click(function () {
            var rows = $("#dg1").datagrid("getVisibleRows");
            alert("共有[" + rows.length + "]条显示的行，其地区集合为：" + $.array.map(rows, function (val) { return val.AreaName; }).join(","));
        });

        var getFrozenColumns = function () {
            var result = [];

            var c1 = [];
            c1.push({ field: 'ID', title: '主键', width: 100 });
            c1.push({ field: 'AreaName', title: '地区', width: 150 });
            c1.push({ field: 'Sex1', title: '男', width: 90 });
            c1.push({ field: 'Sex2', title: '女', width: 90 });

            result.push(c1);

            return result;
        };

        var getColumns = function () {
            var result = [];

            var normal00000 = [
                { field: 'TS1', title: '测试1', width: 60 },
                { field: 'TS2', title: '测试2', width: 60 },
                { field: 'TS3', title: '测试3', width: 60 },
                { field: 'TS33', title: '测试33', width: 60, hidden: true },
                { field: 'TS4', title: '测试4', width: 60 }
            ];
            result.push(normal00000);

            return result;
        };
        var options = {
            title: "数据列表，已开启数据行拖动功能",
            idField: "ID",
            rownumbers: true,
            fit: true,
            border: false,
            singleSelect: true,
            toolbar: "#toolbar1",
            frozenColumns: getFrozenColumns(),
            columns: getColumns(),
            method: "get",
            url: "/Jsons/datagrid/datagrid-common-data.json",
            rowDnd: true
        };

        $("#dg1").datagrid(options);
    });
</script>